<template>
  <div class="c-bg-sgray c-ph24 c-pt20">
    <div v-for="(item, index) in messageSwitchArr" :key="index" :class="index == messageSwitchArr.length - 1 ? '' : 'c-mb20'" class="c-bg-white c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv24 c-br8">
      <div class="c-flex-column">
        <div class="c-fs24 c-fc-xblack">{{MESSAGE_TEXT_MAP[item.type].title}}</div>
        <div class="c-fs20 c-fc-gray c-mt12">{{MESSAGE_TEXT_MAP[item.type].content}}</div>
      </div>
      <x-switch :themeColor="$getThemeColor()" title="" v-model="item.enableWxNotice" prevent-default @on-click="changeSwitch(index)" :value-map="[0, 1]"></x-switch>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { XSwitch } from 'ckjrweb-mp-ui/src/components/index';
const MESSAGE_TEXT_MAP = {
  '1': {
    title: '订阅更新',
    content: '您在打卡详情页主动订阅的更新通知'
  },
  '2': {
    title: '推送通知',
    content: '商家主动推送的课程上新通知'
  },
  '3': {
    title: '消息提醒',
    content: '您通过购买/参与活动等行为触发的消息提醒'
  },
  '4': {
    title: '开播提醒',
    content: '您报名参与的直播/活动/预约等快到开始时间时提醒'
  },
  '5': {
    title: '商家通知',
    content: '商家调课/缺课/发货/改价/同意/拒绝售后等的通知'
  },
  '6': {
    title: '收益通知',
    content: '推广收益/积分到账通知'
  },
  '7': {
    title: '身份变更通知',
    content: '您或者您邀请的人身份发生变化时'
  },
  '8': {
    title: '打卡互动评论提醒',
    content: '老师/学员点评你的打卡后提醒'
  },
  '9': {
    title: '动态互动提醒',
    content: '您在圈子详情页主动订阅的互动提醒通知'
  },
  '-999': {
    title: '音频浮窗播放',
    content: '开启后可退出H5页面，微信浮窗播放音频'
  },
  '-998': {
    title: '打卡上传图片',
    content: '开启后调用微信原生组件来上传图片打卡'
  },
}
export default {
  name: 'PersonalMessageSetting',
  components: {
    XSwitch
  },
  props: [],
  data() {
    return {
      MESSAGE_TEXT_MAP: MESSAGE_TEXT_MAP,
      messageSwitchArr: [],
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    initData() {
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      utilJs.getMethod(global.apiurl + 'messages/personalSettingList', res => {
        if (!res) {
          return;
        }
        if (!res.length) {
          return;
        }
        let arr = res.filter(i => this.companyAuth.version == 1 || (this.companyAuth.version != 1 && i.type != 2));
        //添加本地开关
        arr = this.addLocalSwitch(arr);
        this.messageSwitchArr = arr;
      });
    },

    changeSwitch(index) {
      this.messageSwitchArr[index].enableWxNotice = this.messageSwitchArr[index].enableWxNotice == 0 ? 1 : 0;
      const item = this.messageSwitchArr[index];
      const isLocalSwitchType = item.type * 1 < 0;
      //如果点击的是本地的开关，则直接本地修改开关状态
      if (isLocalSwitchType) {
        this.$showCjToast({
          text: item.enableWxNotice == 1 ? '开启成功' : '关闭成功',
          type: 'text'
        });
        this.changeLocalSwitch(item);
        return;
      }
      utilJs.postMethod(global.apiurl + 'messages/saveConfig', {type: item.type, enableWxNotice: item.enableWxNotice}, () => {
        this.$showCjToast({
          text: item.enableWxNotice == 1 ? '已开启通知' : '已关闭通知',
          type: 'text'
        });
      });
    },
    /**
     * 添加本地开关
     * @param arr
     */
    addLocalSwitch(arr) {
      //是否关闭微信音频开放标签 1关闭，0开启 默认开启
      const isCloseWxAudio = localStorage.getItem("MP_IS_CLOSE_WX_AUDIO");
      //是否关闭微信原生上传图片 1关闭，0开启 默认开启
      const isCloseWxUploadImg = localStorage.getItem("MP_IS_CLOSE_WX_UPLOAD_IMG");
      let localSwitchArr = [
        {
          type: -999,
          enableWxNotice: isCloseWxAudio == 1 ? 0 : 1
        },
        {
          type: -998,
          enableWxNotice: isCloseWxUploadImg == 1 ? 0 : 1
        }
      ];
      arr.push(...localSwitchArr);
      return arr;
    },
    /**
     * 修改本地开关
     * @param item
     */
    changeLocalSwitch(item) {
      if (item.type == -999) {
        localStorage.setItem("MP_IS_CLOSE_WX_AUDIO", item.enableWxNotice == 1 ? 0 : 1);
        return;
      }
      if (item.type == -998) {
        localStorage.setItem("MP_IS_CLOSE_WX_UPLOAD_IMG", item.enableWxNotice == 1 ? 0 : 1);
        return;
      }
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "新消息通知", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("新消息通知", "", shareUrl, "");
    },
  },
  mounted() {
    setDocumentTitle("设置");// eslint-disable-line
    this.initData();
    this.wechatShare();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>